[V0_FILE]typescriptreact:file="pricing-comparison.tsx" isMerged="true" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" export default function PricingComparison() { return (

Take flight with GitHub Copilot

{/* Free Tier */}

New

Free

For developers looking to get started with GitHub Copilot.

$0 USD

Includes up to 2,500 completions and 50 chat requests per month. {/* Pro Tier */}

Pro

For developers who want unlimited access to GitHub Copilot.

$10 USD

per month. First 30 days free.

Free for verified students, teachers, and maintainers of popular open source projects. {/* Business Tier */}

Business

For teams ready to accelerate their workflows with GitHub Copilot.

$19 USD

per user / month

{/* Enterprise Tier */}

Enterprise

For organizations seeking a fully customized GitHub Copilot experience.

$39 USD

per user / month

) } [V0_FILE]typescriptreact:file="components/platform-icon.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type React from "react" import { cn } from "@/lib/utils" interface PlatformIconProps extends React.HTMLAttributes { icon: string name: string } export function PlatformIcon({ icon, name, className, ...props }: PlatformIconProps) { return (

) } [V0_FILE]typescriptreact:file="pricing-page.tsx" isMerged="true" import { PlatformIcon } from "./components/platform-icon" import { PricingCard } from "./components/pricing-card" const tiers = [ { name: "Free", badge: { text: "New", variant: "new" as const, }, description: "For developers looking to get started with GitHub Copilot.", price: 0, buttonText: "Get started", buttonVariant: "default" as const, footer: "Includes up to 2,500 completions and 50 chat requests per month.", }, { name: "Pro", badge: { text: "Most popular", variant: "popular" as const, }, description: "For developers who want unlimited access to GitHub Copilot.", price: 10, period: "per month. First 30 days free.", buttonText: "Get started", buttonVariant: "default" as const, footer: "Free for verified students, teachers, and maintainers of popular open source projects.", }, { name: "Business", description: "For teams ready to accelerate their workflows with GitHub Copilot.", price: 19, period: "per user / month", buttonText: "Contact sales", buttonVariant: "outline" as const, }, { name: "Enterprise", description: "For organizations seeking a fully customized GitHub Copilot experience.", price: 39, period: "per user / month", buttonText: "Contact sales", buttonVariant: "outline" as const, }, ] const platforms = [ { name: "GitHub", icon: "/github-mark-white.svg", }, { name: "VS Code", icon: "/vscode.svg", }, { name: "Visual Studio", icon: "/visual-studio.svg", }, { name: "JetBrains", icon: "/jetbrains.svg", }, { name: "Android Studio", icon: "/android-studio.svg", }, { name: "Neovim", icon: "/neovim.svg", }, { name: "Azure Data Studio", icon: "/azure-data-studio.svg", }, ] export default function PricingPage() { return (

{/* Header */}

Take flight with GitHub Copilot

{/* Pricing Cards */}

{tiers.map((tier) => ( ))}

{/* Platform Support */}

GitHub Copilot is available on your favorite platforms:

{platforms.map((platform) => ( ))}

) } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="providers/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { Navbar } from "@/components/navbar" import { HeroSection } from "@/components/hero-section" import { PricingCard } from "@/components/pricing-card" import { PhotographyPlanComparison } from "@/components/photography-plan-comparison" import { GradientHeading } from "@/components/ui/gradient-heading" import { Button } from "@/components/ui/button" import { Camera, Image, Users, Video, Star, Award, Clock, MapPin } from "lucide-react" const plans = [ { name: "Basic", badge: { text: "New", variant: "new" as const, }, description: "Perfect for individuals or small events.", price: 299, period: "per session", buttonText: "Book Now", buttonVariant: "primary" as const, features: [ { name: "2-hour photo session", icon: Camera }, { name: "50 edited digital photos", icon: Image }, { name: "Online gallery", icon: Star }, { name: "1 location", icon: Users }, ], footer: { text: "Additional hours available at $100/hour", }, }, { name: "Premium", badge: { text: "Most popular", variant: "popular" as const, }, description: "Ideal for weddings and large events.", price: 999, period: "per event", buttonText: "Book Now", buttonVariant: "primary" as const, features: [ { name: "Full-day coverage (up to 8 hours)", icon: Camera }, { name: "200 edited digital photos", icon: Image }, { name: "Online gallery with downloads", icon: Star }, { name: "Multiple locations", icon: Users }, { name: "2 photographers", icon: Users }, ], footer: { text: "Engagement shoot included", link: { text: "Learn more", href: "#", }, }, }, { name: "Commercial", description: "For businesses and professional needs.", price: 1499, period: "per project", buttonText: "Get Quote", buttonVariant: "outline" as const, features: [ { name: "Full-day photo and video shoot", icon: Camera }, { name: "100 edited photos", icon: Image }, { name: "5-minute promotional video", icon: Video }, { name: "Commercial usage rights", icon: Star }, { name: "Professional editing and retouching", icon: Image }, ], footer: { text: "Customizable to your specific needs", }, }, { name: "Elite", description: "Luxury package for high-end clients.", price: 2999, period: "per event", buttonText: "Contact Us", buttonVariant: "outline" as const, features: [ { name: "Multi-day event coverage", icon: Camera }, { name: "Unlimited edited photos", icon: Image }, { name: "Cinematic highlight video", icon: Video }, { name: "Drone aerial photography", icon: Camera }, { name: "Premium photo album", icon: Star }, ], footer: { text: "Includes travel and accommodation", link: { text: "View portfolio", href: "#elite-portfolio", }, }, }, ] const services = [ { title: "Wedding Photography", description: "Capture the magic of your special day with our expert wedding photographers.", icon: Users, }, { title: "Portrait Sessions", description: "Professional portraits for individuals, families, and corporate headshots.", icon: Camera, }, { title: "Event Coverage", description: "Comprehensive photography for corporate events, parties, and conferences.", icon: Star, }, { title: "Commercial Photography", description: "High-quality images for your business, products, and marketing materials.", icon: Image, }, ] const testimonials = [ { quote: "Dollar Gill captured our wedding day perfectly. The photos are absolutely stunning!", author: "Sarah & John", role: "Newlyweds", }, { quote: "The team's professionalism and creativity exceeded our expectations for our corporate event.", author: "Michael Roberts", role: "Marketing Director", }, { quote: "Our family portraits are treasures we'll cherish forever. Thank you, Dollar Gill!", author: "The Thompson Family", role: "Repeat Clients", }, ] export default function Page() { return (

Choose Your Perfect Package

{plans.map((plan) => ( ))}

Our Services

{services.map((service, index) => (

{service.title}

{service.description}

))}

Why Choose Dollar Gill

Award-Winning

Recognized for excellence in photography and customer satisfaction.

Timely Delivery

Quick turnaround times without compromising on quality.

On-Location

We travel to your preferred locations for the perfect shot.

What Our Clients Say

{testimonials.map((testimonial, index) => (

"{testimonial.quote}"

{testimonial.author}

{testimonial.role}

))}

Ready to Capture Your Moments?

Let's create beautiful memories together. Contact us today to discuss your photography needs.

) } [V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import { ChevronDown, Camera, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" const navItems = [ { title: "Product", items: [ "Features", "Mobile", "Actions", "Codespaces", "Packages", "Security", "Code review", "Issues", "Discussions", ], }, { title: "Solutions", items: ["Enterprise", "Teams", "Startups", "Education"], }, { title: "Resources", items: ["Documentation", "Community", "Professional Services", "Skills", "Status", "Contact"], }, { title: "Open Source", items: ["Topics", "Trending", "Collections", "Events"], }, { title: "Enterprise", items: ["Plans", "Features", "Resources", "Contact Sales"], }, ] export function Navbar() { return (

Dollar Gill

{[ { title: "Portfolio", items: ["Weddings", "Events", "Portraits", "Commercial"] }, { title: "Services", items: ["Photo Sessions", "Video Production", "Retouching", "Prints"] }, { title: "About", items: ["Our Team", "Studio", "Equipment", "Testimonials"] }, ].map((nav) => (

))} Packages

Gallery

) } [V0_FILE]typescriptreact:file="components/mode-toggle.tsx" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="components/pricing-page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { Navbar } from "./navbar" import { PricingCard } from "./pricing-card" import { Button } from "./ui/button" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./ui/accordion" import { GitHubIcon, VSCodeIcon, VisualStudioIcon, JetBrainsIcon, AndroidStudioIcon, NeovimIcon, AzureDataStudioIcon, } from "./platform-icons" import { FeatureComparison } from "./feature-comparison" const tiers = [ { name: "Free", badge: { text: "New", variant: "new" as const, }, description: "For developers looking to get started with GitHub Copilot.", price: 0, features: ["Up to 2,500 completions per month", "50 chat requests per month", "Basic code suggestions"], buttonText: "Get started", buttonVariant: "default" as const, footer: "No credit card required", }, { name: "Pro", badge: { text: "Most popular", variant: "popular" as const, }, description: "For developers who want unlimited access to GitHub Copilot.", price: 10, period: "per month. First 30 days free.", features: ["Unlimited completions", "Unlimited chat requests", "Advanced code suggestions", "Priority support"], buttonText: "Start free trial", buttonVariant: "default" as const, footer: "Free for verified students, teachers, and maintainers of popular open source projects.", }, { name: "Business", description: "For teams ready to accelerate their workflows with GitHub Copilot.", price: 19, period: "per user / month", features: ["All Pro features", "Team management", "License management", "Usage reporting"], buttonText: "Contact sales", buttonVariant: "outline" as const, }, { name: "Enterprise", description: "For organizations seeking a fully customized GitHub Copilot experience.", price: 39, period: "per user / month", features: ["All Business features", "Custom model training", "Advanced security features", "Dedicated support"], buttonText: "Contact sales", buttonVariant: "outline" as const, }, ] const platforms = [ { name: "GitHub", Icon: GitHubIcon }, { name: "VS Code", Icon: VSCodeIcon }, { name: "Visual Studio", Icon: VisualStudioIcon }, { name: "JetBrains", Icon: JetBrainsIcon }, { name: "Android Studio", Icon: AndroidStudioIcon }, { name: "Neovim", Icon: NeovimIcon }, { name: "Azure Data Studio", Icon: AzureDataStudioIcon }, ] const faqs = [ { question: "What is GitHub Copilot?", answer: "GitHub Copilot is an AI pair programmer that helps you write code faster and with less work. It draws context from comments and code to suggest individual lines and whole functions instantly.", }, { question: "How does GitHub Copilot work?", answer: "GitHub Copilot uses OpenAI Codex to suggest code and entire functions in real-time, right from your editor. It's powered by machine learning models trained on billions of lines of public code.", }, { question: "Is my code safe with GitHub Copilot?", answer: "GitHub takes the privacy and security of your code seriously. Copilot is designed to only access and suggest code based on the context of the file you're currently editing. It does not have access to your private repositories unless you explicitly grant permission.", }, { question: "Can I use GitHub Copilot with my preferred IDE?", answer: "Yes, GitHub Copilot is available as an extension for popular IDEs including Visual Studio Code, Visual Studio, Neovim, and JetBrains IDEs.", }, ] export default function PricingPage() { return (

{/* Header */}

Take flight with GitHub Copilot

Your AI pair programmer. Write better code faster with GitHub Copilot.

{/* Pricing Cards */}

{tiers.map((tier) => ( ))}

{/* Platform Support */}

GitHub Copilot is available on your favorite platforms:

{platforms.map(({ name, Icon }) => (

))}

{/* Feature Comparison */} {/* FAQ Section */}

Frequently Asked Questions

{faqs.map((faq, index) => ( {faq.question} {faq.answer} ))}

{/* CTA Section */}

Ready to get started?

Join millions of developers using GitHub Copilot today.

{/* Footer */}

) } [V0_FILE]typescriptreact:file="components/platform-icons.tsx" isMerged="true" interface PlatformIconProps { name: string className?: string } export function GitHubIcon({ className }: PlatformIconProps) { return ( ) } export function VSCodeIcon({ className }: PlatformIconProps) { return ( ) } export function VisualStudioIcon({ className }: PlatformIconProps) { return ( ) } export function JetBrainsIcon({ className }: PlatformIconProps) { return ( ) } export function AndroidStudioIcon({ className }: PlatformIconProps) { return ( ) } export function NeovimIcon({ className }: PlatformIconProps) { return ( ) } export function AzureDataStudioIcon({ className }: PlatformIconProps) { return ( ) } [V0_FILE]typescriptreact:file="components/feature-comparison.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { Badge } from "@/components/ui/badge" import { Check, Infinity, Minus } from "lucide-react" import type React from "react" // Added import for React interface FeatureRowProps { feature: string values: { free: React.ReactNode pro: React.ReactNode business: React.ReactNode enterprise: React.ReactNode } preview?: boolean } function FeatureRow({ feature, values, preview }: FeatureRowProps) { return (

{feature} {preview && ( Preview )}

{values.free}

{values.pro}

{values.business}

{values.enterprise}

) } export function FeatureComparison() { return (

Compare features

Features

Free

Pro

$10 per month

Business

$19 per user / month

Enterprise

$39 per user / month

Chat

Up to 50 per month

, pro: , business: , enterprise: , }} /> , pro: , business: , enterprise: , }} /> , pro: , business: , enterprise: , }} /> , pro: , business: , enterprise: , }} />

Features

, pro: , business: , enterprise: , }} /> , pro: , business: , enterprise: , }} /> , pro: , business: , enterprise: , }} />

Security & Compliance

, pro: , business: , enterprise: , }} /> , pro: , business: , enterprise: , }} /> , pro: , business: , enterprise: , }} />

) } [V0_FILE]typescriptreact:file="components/platform-support.tsx" isMerged="true" interface PlatformIconProps { className?: string } function GitHubIcon({ className }: PlatformIconProps) { return ( ) } function VSCodeIcon({ className }: PlatformIconProps) { return ( ) } // Add other platform icons similarly... export function PlatformSupport() { const platforms = [ { name: "GitHub", Icon: GitHubIcon }, { name: "VS Code", Icon: VSCodeIcon }, // Add other platforms... ] return (

GitHub Copilot is available on your favorite platforms:

{platforms.map(({ name, Icon }) => (

))}

) } [V0_FILE]typescriptreact:file="components/ui/gradient-heading.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type React from "react" interface GradientHeadingProps { children: React.ReactNode className?: string } export function GradientHeading({ children, className }: GradientHeadingProps) { return (

{children}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 222.2 84% 4.9%; --card: 222.2 84% 4.9%; --popover: 222.2 84% 4.9%; --primary: 210 40% 98%; --secondary: 217.2 32.6% 17.5%; --muted: 217.2 32.6% 17.5%; --accent: 217.2 32.6% 17.5%; --destructive: 0 62.8% 30.6%; --border: 217.2 32.6% 17.5%; } } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } .bg-gradient-glow { background: radial-gradient(circle at top, rgba(124, 58, 237, 0.1), rgba(37, 99, 235, 0.05)); } [V0_FILE]typescriptreact:file="components/ui/card-glow.tsx" isMerged="true" "use client" import type * as React from "react" import { motion } from "framer-motion" interface CardGlowProps extends React.HTMLAttributes { children: React.ReactNode className?: string } export function CardGlow({ children, className, ...props }: CardGlowProps) { return (

{children} ) } [V0_FILE]typescriptreact:file="components/pricing-card.tsx" isEdit="true" isMerged="true" "use client" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { CardGlow } from "@/components/ui/card-glow" import { motion } from "framer-motion" import { cn } from "@/lib/utils" import type React from "react" interface PricingCardProps { plan: { name: string badge?: { text: string variant: "new" | "popular" } description: string price: number period: string features: { name: string; icon: React.ElementType }[] buttonText: string buttonVariant: "primary" | "outline" footer?: { text: string link?: { text: string href: string } } } } export function PricingCard({ plan }: PricingCardProps) { return (

{plan.badge && ( {plan.badge.text} )}

{plan.name} {plan.description}

${plan.price} USD

{plan.period}

{plan.features.map((feature, index) => (

{feature.name}

))}

{plan.footer && ( {plan.footer.text} {plan.footer.link && ( {plan.footer.link.text} )} )} ) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isFixed="true" isQuickEdit="true" isMerged="true" import type { Config } from "tailwindcss" export default { darkMode: ["class"], content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, animation: { "glow-line-horizontal": "glow-line-horizontal 3s infinite", "glow-line-vertical": "glow-line-vertical 3s infinite", }, keyframes: { "glow-line-horizontal": { "0%, 100%": { transform: "translateX(0)" }, "50%": { transform: "translateX(100%)" }, }, "glow-line-vertical": { "0%, 100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(100%)" }, }, }, backdropBlur: { "3xl": "64px", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config [V0_FILE]typescriptreact:file="package.json" isEdit="true" isMerged="true" { "dependencies": { "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "framer-motion": "^10.16.4", "lucide-react": "^0.294.0", "next": "^14.0.3", "next-themes": "^0.2.1", "react": "^18.2.0", "react-dom": "^18.2.0", "tailwind-merge": "^2.1.0", "tailwindcss-animate": "^1.0.7" } } [V0_FILE]typescriptreact:file="components/photography-plan-comparison.tsx" isMerged="true" import { Check, Minus } from "lucide-react" import { Badge } from "@/components/ui/badge" import type React from "react" interface PlanFeatureProps { feature: string values: { basic: React.ReactNode premium: React.ReactNode commercial: React.ReactNode elite: React.ReactNode } preview?: boolean } function PlanFeature({ feature, values, preview }: PlanFeatureProps) { return (

{feature} {preview && ( New )}

{values.basic}

{values.premium}

{values.commercial}

{values.elite}

) } export function PhotographyPlanComparison() { return (

Compare Photography Plans

Features

Basic

$299 per session

Premium

$999 per event

Commercial

$1499 per project

Elite

$2999 per event

Session Details

2 hours

, premium:

Up to 8 hours

, commercial:

Full day

, elite:

Multi-day

, }} /> 1

, premium:

Multiple

, commercial:

As needed

, elite:

Unlimited

, }} /> 1

, premium:

, commercial:

2-3

, elite:

, }} />

Deliverables

, premium:

200

, commercial:

100

, elite:

Unlimited

, }} /> , premium: , commercial: , elite: , }} /> , premium: , commercial:

5-min promo

, elite:

Cinematic highlight

, }} /> , premium: , commercial: , elite: , }} />

Additional Services

, premium: , commercial:

Available (+$299)

, elite: , }} /> , premium: , commercial: , elite: , }} /> +$99

, premium:

+$199

, commercial:

+$299

, elite: , }} /> Not included

, premium:

Not included

, commercial:

+Travel costs

, elite: , }} />

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isQuickEdit="true" import { Button } from "@/components/ui/button" import { GradientHeading } from "@/components/ui/gradient-heading" export function HeroSection() { return (

Capture Your Moments with Dollar Gill

Professional photography services for every occasion. From intimate portraits to grand events, we bring your vision to life.

) }

About

Tags

Share

More from dollargill

More Templates Like This

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This